<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>videoconverter.js - Convert Videos In Your Web Browser</title>
    <meta name="description" content="Video Converter is a port of the FFmpeg project that allows audio/video conversion and processing in JavaScript.">
    <meta name="author" content="Brian Grinstead, Aaron Marasco, and contributors">
    <link rel="shortcut icon" href="../site/favicon.ico">
    <link href="../site/site.css" rel="stylesheet">
    <style type="text/css">
      #terminal {
        background: #fff;
        color: #000;
        font-family: "Lucida Console", "Lucida Sans Typewriter", Monaco, "Bitstream Vera Sans Mono", monospace;
        font-weight: lighter;
        border: solid 1px;
        padding: 10px;
        margin-top: 35px;
      }
      .terminal-top-bar {
        background: rgb(233, 233, 233);
        height: 14px;
        font-size: 12px;
        line-height: 14px;
        margin-top: -30px;
        margin-left: -11px;
        margin-right: -11px;
        padding: 3px;
        text-align: center;
        color: rgb(92, 92, 92);
        border: solid 1px;
        border-radius: 2px 2px 0 0;
      }
      .terminal-header {
        padding-top: 15px;
      }
      #input {
        width: 80%;
        padding: 4px;
      }
      #run {
        width: 15%
      }
      #output {
        white-space: pre-wrap;
        word-break: break-all;
      }
      #output.closed {
        max-height: 200px;
        overflow-y: scroll;
      }
      #files {
        text-align: center;
      }
      #files img {
        max-width: 80%;
      }
      .sample-commands {
        text-align: center;
      }
    </style>
  </head>
<body>

  <div class="container-fluid">
    <div class='content'>
      <div class='inner-content'>
        <div class="header clearfix">
          <div class="pull-left">
          <H1><a href='../'><img src='../site/logo.png' width="30" /><span>videoconverter.js</span></a>
          </H1>
          </div>
          <div class="pull-right links">
            <a href='.'>demo</a>
            <a href='../#docs'>docs</a>
            <a href='http://github.com/bgrins/videoconverter.js'>source code on github</a>
          </div>
        </div>

        <div class="clearfix">
          <h2>Terminal Demo</h2>
            <p>
Imagine that you have installed FFmpeg on your computer.  Also imagine that you have files called <a href="bigbuckbunny.webm">input.webm</a> and <a href="bigbuckbunny.jpg">input.jpeg</a> in the current directory.  Feel free to run whatever commands you want, or <strong>try the sample commands below:</strong>
            </p>

            <div class="sample-commands">
              <button class="plain-button sample" data-command="-help">Help</button>

              <button class="plain-button sample" data-command="-codecs">List Codecs</button>

              <button class="plain-button sample" data-command="-i input.jpeg -vf vflip output.jpeg">Vertical Flip Image</button>

              <button class="plain-button sample" data-command="-i input.jpeg -vf hflip output.jpeg">Horizontal Flip Image</button>

              <button class="plain-button sample" data-command="-i input.webm -vf showinfo -strict -2 output.mp4">Video to .mp4</button>

              <button class="plain-button sample" data-command="-t 5 -i input.webm -vf showinfo -strict -2 output.gif">Video to .gif</button>

              <button class="plain-button sample" data-command="-i input.webm -s 100x100 -f image2 -vf fps=fps=1,showinfo -an out%d.jpeg">Video to screenshots</button>

              <button class="plain-button sample" data-command="-i input.webm -vf &quot;showinfo,drawbox=enable='between(n,0,60)' : x=10 : y=10 : w=50 : h=50 : color=red,drawbox=enable='gte(t,1)' : x=100 : y=100 : w=200 : h=200 : color=green&quot; -strict -2 output.mp4">Draw Boxes on Video</button>

              <button class="plain-button sample" data-command="-t 3 -i input.webm -vf showinfo -strict -2 -c:v libx264 output.mp4">H.264</button>

              <button class="plain-button sample" data-command="-t 3 -i input.webm -vf showinfo -strict -2 -c:v libvpx-vp9 output.webm">VP9</button>

            </div>
            <div id="terminal">
              <div class="terminal-top-bar">
                videoconverter.js
              </div>
              <div class="terminal-header">
                <input id="input" value="-help" />
                <button id="run" class="plain-button">Run Command</button>
                <img id="image-loader" src="../site/load.gif" />
              </div>
              <pre id="output">Loading JavaScript files (it may take a minute)</pre>
            </div>
            <div id="files">

            </div>
        </div>
      </div>
    </div>

  </div>

  <script type='text/javascript' src='terminal.js'></script>
</body>
</html>
